<template>
  <div class="page">
    <el-form :inline="true">
      <el-form-item label="用户ID">
        <el-input v-model="queryParams.uid"></el-input>
      </el-form-item>
      <!-- <el-form-item label="ID">
        <el-input v-model="queryParams.id"></el-input>
      </el-form-item> -->
      <el-form-item label="运营中心名称">
        <el-input v-model="queryParams.name"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getData">查询</el-button>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="addNew">新增</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['ds:productOrder:export']"
          >导出</el-button
        >
      </el-col>
    </el-row>

    <el-table :data="list" border>
      <el-table-column label="序号" type="index"></el-table-column>
      <el-table-column label="ID" prop="id"></el-table-column>
      <el-table-column label="名称" prop="name"></el-table-column>
      <el-table-column label="省" prop="province"></el-table-column>
      <el-table-column label="市" prop="city"></el-table-column>
      <el-table-column label="县/区" prop="county"></el-table-column>
      <el-table-column label="用户ID" prop="uid"></el-table-column>
      <el-table-column label="可提现金额" prop="achievement"></el-table-column>
      <el-table-column label="当月业绩" prop="createBy"></el-table-column>
      <el-table-column label="总业绩" prop="updateBy"></el-table-column>
      <el-table-column label="累计提现" prop="searchValue"></el-table-column>
      <el-table-column label="状态" prop="status">
        <template slot-scope="scope">
          {{
            scope.row.status === 1
              ? "启用"
              : scope.row.status === 0
              ? "停用"
              : "/"
          }}
        </template>
      </el-table-column>

      <el-table-column label="操作" prop="status" width="300">
        <template slot-scope="scope">
          <el-button @click="edit(scope.row)">编辑</el-button>
          <el-button @click="withdrawal(scope.row)">提现记录</el-button>
          <el-button @click="moneyChangeList(scope.row)">明细</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="flex">
      <span>启用数量:{{ usedNum }}</span>
      <span>停用数量:{{ disabledNum }}</span>

      <el-pagination
        background
        layout="total, prev, pager, next, jumper"
        @current-change="handleCurrentChange"
        :current-page.sync="queryParams.pageNum"
        :page-size="queryParams.pageSize"
        :total="total"
      >
      </el-pagination>
    </div>

    <!-- 新增编辑表单 -->
    <el-dialog title="编辑运营中心" :visible.sync="show">
      <el-form :model="form" :rules="rules" ref="ruleForm">
        <el-form-item label="省市县" label-width="80">
          <el-cascader-panel
            v-if="show"
            :options="options"
            v-model="cityArray"
          ></el-cascader-panel>
        </el-form-item>
        <el-form-item label="用户ID" label-width="80">
          <el-input v-model="form.uid"></el-input>
        </el-form-item>
        <el-form-item label="运营中心名称" label-width="80">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="状态" label-width="80">
          <el-switch
            v-model="form.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="0"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="show = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="提现列表"
      border
      :visible.sync="withdrawalListShow"
      width="1400"
      :before-close="handleWithdrawalClose"
    >
      <el-table :data="withdrawalList">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="id" label="Id"></el-table-column>
        <el-table-column prop="type" label="类型"></el-table-column>
        <el-table-column prop="remark" label="备注"></el-table-column>
        <el-table-column prop="amount" label="金额"></el-table-column>
        <el-table-column prop="balance" label="余额"></el-table-column>
        <el-table-column prop="createTime" label="提交时间"></el-table-column>
        <el-table-column prop="name" label="区域"></el-table-column>
        <el-table-column prop="detailed" label="详细信息"></el-table-column>
        <!-- <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              :active-value="1"
              :inactive-value="0"
            ></el-switch>
          </template>
        </el-table-column> -->

        <el-table-column
          prop="status"
          width="220"
          label="操作"
          v-if="detailedFlag"
        >
          <template slot-scope="scope">
            <el-button type="primary" @click="pass(scope.row)">通过</el-button>
            <el-button type="danger" @click="refuse(scope.row)">拒绝</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        background
        layout="prev, pager, next"
        :total="withdrawalListTotal"
        :page-size="10"
        :current-page="withdrawalPageNum"
        @current-change="handlewithdrawalPageChange"
      >
      </el-pagination>
    </el-dialog>
  </div>
</template>
<script>
import {
  coreList,
  coreExport,
  coreAdd,
  coreEdit,
  achievementRecordList,
  reviewSecondWithdrawal,
  countNumber,
} from "@/api/ds/operation";
import citys from "./city.json";
export default {
  components: {},
  props: {},
  data() {
    return {
      queryParams: {
        uid: "",
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      list: [],

      cityArray: [],

      form: {},
      show: false,
      options: citys,

      mode: "add",

      rules: {
        province: [{ required: true, message: "请选择省", trigger: "blur" }],
        city: [{ required: true, message: "请选择市", trigger: "blur" }],
        county: [{ required: true, message: "请选择县区", trigger: "blur" }],
      },

      // 提现相关
      withdrawalListShow: false,
      withdrawalList: [],
      withdrawalListTotal: 0,
      withdrawalPageNum: 1,

      detailedFlag: false,
      queryObj: null,

      usedNum: 0,
      disabledNum: 0,
    };
  },
  computed: {},
  watch: {
    cityArray: {
      deep: true,
      handler(newVal, oldVal) {
        this.form.province = newVal[0];
        this.form.city = newVal[1];
        this.form.county = newVal[2];
      },
    },
  },
  created() {
    this.getData();
  },
  methods: {
    async withdrawal(row) {
      this.detailedFlag = true;
      this.queryObj = row;

      let params = {
        uid: row.id,
        pageNum: this.withdrawalPageNum,
        pageSize: 10,
        detailed: "运营中心申请提现",
      };

      let res = await achievementRecordList(params);
      if (res.code === 200) {
        this.withdrawalList = res.rows;
        this.withdrawalListShow = true;
        this.withdrawalListTotal = res.total;
        this.$forceUpdate();
      }
    },
    // // 多选框选中数据
    // handleSelectionChange(selection) {
    //   console.log(selection);
    //   this.ids = selection.map((item) => item.id);
    //   this.single = selection.length !== 1;
    //   this.multiple = !selection.length;
    // },
    /** 导出按钮操作 */
    handleExport() {
      // let queryParams = this.addDateRange(this.detailed, this.id,this.queryTime, "");
      let detailed = this.queryParams;
      this.$confirm("是否确认导出运营中心数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return coreExport(detailed);
        })
        .then((response) => {
          this.download(response.msg);
        });
    },

    async moneyChangeList(row) {
      this.detailedFlag = false;
      this.queryObj = row;

      let params = {
        uid: row.id,
        pageNum: this.withdrawalPageNum,
        pageSize: 10,
      };

      let res = await achievementRecordList(params);
      if (res.code === 200) {
        this.withdrawalList = res.rows;
        this.withdrawalListShow = true;
        this.withdrawalListTotal = res.total;
        this.$forceUpdate();
      }
    },

    handlewithdrawalPageChange(val) {
      this.withdrawalPageNum = val;
      if (this.detailedFlag) {
        this.withdrawal(this.queryObj);
      } else {
        this.moneyChangeList(this.queryObj);
      }
    },

    handleWithdrawalClose() {
      this.detailedFlag = false;
      this.queryObj = null;
      this.withdrawalListShow = false;
      this.withdrawalList = [];
      this.withdrawalListTotal = 0;
      this.withdrawalPageNum = 1;
    },

    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getData();
    },
    async getData() {
      let res = await coreList(this.queryParams);
      if (res.code === 200) {
        this.total = res.total;
        this.list = res.rows;
      }

      let res1 = await countNumber();
      if (res1.code === 200) {
        this.usedNum = res1.data.open;
        this.disabledNum = res1.data.close;
      }
    },
    edit(row) {
      this.form = JSON.parse(JSON.stringify(row));

      this.cityArray = [this.form.province, this.form.city, this.form.county];
      this.show = true;

      this.mode = "edit";
    },
    addNew() {
      this.form = {
        province: "",
        city: "",
        county: "",
        uid: "",
        status: 1,
        name: "",
      };
      this.show = true;
      this.mode = "add";
    },

    async pass(row) {
      let res = await reviewSecondWithdrawal({ recordId: row.id, type: 1 });
      if (res.code === 200) {
        this.$notify({
          title: "成功",
          message: res.msg,
          type: "success",
        });

        this.withdrawalListShow = false;
      }
    },
    async refuse(row) {
      this.$prompt("请输入拒绝备注", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(async ({ value }) => {
          let res = await reviewSecondWithdrawal({
            recordId: row.id,
            type: 2,
            remarks: value,
          });

          if (res.code === 200) {
            this.$notify({
              title: "成功",
              message: res.msg,
              type: "success",
            });

            this.withdrawalListShow = false;
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },

    async submit() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          if (this.mode === "add") {
            let res = await coreAdd(this.form);
            if (res.code === 200) {
              this.$notify({
                type: "success",
                message: res.msg,
                title: "成功",
              });

              this.getData();

              this.show = false;
            }
          } else if (this.mode === "edit") {
            let res = await coreEdit(this.form);
            if (res.code === 200) {
              this.$notify({
                type: "success",
                message: res.msg,
                title: "成功",
              });

              this.getData();

              this.show = false;
            }
          }
        } else {
          return false;
        }
      });
    },
  },
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
  deactivated() {},
};
</script>
<style lang="scss" scoped>
.page {
  width: 100%;
  min-height: 80vh;
  box-sizing: border-box;
  padding: 20px;

  .flex {
    width: 100%;
    height: 50px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    align-items: center;
    box-sizing: border-box;
    padding-right: 20rpx;

    font-size: 13px;
    min-width: 35.5px;
    height: 28px;
    line-height: 28px;
    vertical-align: top;

    span {
      padding: 0 10px;
      color: #606266;
    }
  }
}
</style>
